<template>
    <div class="bigdiv">
      <div class="head">
        <h2>代办列表</h2>
        <TodoEnter :todos="todos" @add-todo="addTodo" />
        <!-- <input 
          type="text" 
          class="shuru" 
          placeholder="输入待办项目后点击回车"
          v-model="newTodo"
          @keyup.enter="addTodo"
          ref="shuru"
        > -->
      </div>
      <div class="foot">
        <ul id="qingdan">
          <li v-for="(todo, index) in todos" :key="index">
            <span>{{ todo.text }}</span>
            <input type="checkbox">
            <button @click="removeTodo(index)">删除</button>
          </li>
        </ul>
      </div>
      
    </div>
    

    <div class="cangku">
      <a href="https://gitee.com/chen-zanji/implementing-todolisy-with-vue.git"  class="biaoqian">代码仓库</a>

    </div>

  </template>
  
  <script setup>
  import { ref } from 'vue';
  import  TodoEnter  from './TodoEnter.vue'
  
  // const newTodo = ref('');
  const todos = ref([]);
  
  // const addTodo = () => {
  //   if (newTodo.value.trim() === '') {
  //     alert('你必须输入内容');
  //     newTodo.value = '';
  //   } else {
  //     todos.value.push({ text: newTodo.value });
  //     newTodo.value = '';
  //     const inputElement = document.querySelector('.shuru');
  //     if (inputElement) {
  //       inputElement.focus(); // 重新聚焦输入框
  //     }
  //   }
  // };
  
  const addTodo = (todo) => {
  todos.value.push(todo);
};
  const removeTodo = (index) => {
    todos.value.splice(index, 1);
  };
  </script>
  
  <style>
  * {
    list-style-type: none;
  }
  .bigdiv {
    height: 800px;
    width: 500px;
    margin: 0 auto;
    border-radius: 15px;
    -moz-box-shadow: 0px 0px 10px #333333;
    -webkit-box-shadow: 0px 0px 10px #333333;
    box-shadow: 0px 0px 10px #333333;
    position: relative;
  }
  .head {
    border-bottom: 1px gray solid;
    background-color: aquamarine;
    height: 120px;
  }
  /* .shuru {
    height: 50px;
    width: 300px;
    border: 1px gray solid;
    border-radius: 10px;
    position: absolute;
    left: 100px;
    right: 100px;
    top: 50px;
  } */
  h2 {
    text-align: center;
  }
  .foot {
    height: 680px;
    width: 100%;
  }
  li {
    width: 420px;
    height: 40px;
    border: 1px black solid;
    display: block;
    margin-top: 10px;
    border-radius: 10px;
    position: relative;
    transition: .3s;
  }
  li:hover {
    -moz-box-shadow: 0px 0px 5px #FF0000;
    -webkit-box-shadow: 0px 0px 5px #FF0000;
    box-shadow: 0px 0px 5px #FF0000;
  }
  button {
    right: 10px;
    top: 10px;
    position: absolute;
  }
  input {
    position: absolute;
    left: -30px;
    top: 10px;
  }
  span {
    line-height: 35px;
  }
  input:hover {
    -moz-box-shadow: 0px 0px 5px #FF0000;
    -webkit-box-shadow: 0px 0px 5px #FF0000;
    box-shadow: 0px 0px 5px #FF0000;
  }
.cangku{
    height: 100px;
    width: 100px;
    margin: 0 auto;

}
.biaoqian{
  text-align: center;
  font-size: 150%;
  position: relative;
}
  </style>